<template>
	<div class="com-home-list-item" v-if="list.length >0">
		<van-row gutter="10">
			<van-col class="mb-0" span="12" v-for="(item,index) in list" :key="index">
				<div class="com-home-list-item-box" @click="goAiPaintDetail(item.id)">
					<img :src="item.image" alt="">
					<div class="com-home-list-item-box-title">{{ item.imageresolution }}</div>
				</div>
			</van-col>
			<!-- 用于处理长度为单数篡位问题 -->
			<van-col span="12" v-if="list.length%2!=0"></van-col>
		</van-row>
	</div>
	<van-empty v-else :description="emptyText" />
</template>

<script>
export default {
  name: "ComHomeListItem",
	props:{
		list: {
			type: Array,
			default: () => []
		}
	},
	data(){
		return {
			emptyText: this.$t("暂无数据"),
			loading: false,
      	finished: false,
		}
	},
	mounted(){
		
	},
	methods: {
		goAiPaintDetail(id){
			// 跳转ai绘图详情
			this.$router.push({
				name: 'AiCreationDetail',
				params: {
					id: id
				}
			})
		}
	}
};
</script>

<style>
.com-home-list-item .com-home-list-item-box{
	width: 100%;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}
.com-home-list-item .com-home-list-item-box img{
	max-width: 100%;
	aspect-ratio: 1;
}
.com-home-list-item .com-home-list-item-box-title{
	width	: 100%;
	line-height: 1.5rem;
	font-size: 0.9rem;
	background: rgba(0, 0, 0, 0.50);
	position: absolute;
	bottom: 0;
	padding: 0 1rem;
	
}
</style>